<template>
  <div class="system-settings">
    <div class="settings-header">
      <h2>系统设置</h2>
      <button class="btn btn-primary" @click="saveSettings">保存设置</button>
    </div>
    
    <div class="settings-content">
      <div class="settings-section">
        <h3>基本设置</h3>
        <div class="form-group">
          <label>网站名称</label>
          <input type="text" v-model="settings.siteName" />
        </div>
        <div class="form-group">
          <label>网站描述</label>
          <textarea v-model="settings.siteDescription" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label>网站关键词</label>
          <input type="text" v-model="settings.siteKeywords" />
        </div>
        <div class="form-group">
          <label>网站Logo</label>
          <div class="logo-upload">
            <img v-if="settings.siteLogo" :src="settings.siteLogo" alt="Logo" class="logo-preview" />
            <button @click="triggerLogoUpload" class="btn btn-secondary">上传Logo</button>
            <input 
              ref="logoInput" 
              type="file" 
              accept="image/*" 
              @change="handleLogoUpload" 
              style="display: none;"
            />
          </div>
        </div>
      </div>
      
      <div class="settings-section">
        <h3>用户设置</h3>
        <div class="form-group">
          <label>
            <input type="checkbox" v-model="settings.allowRegistration" />
            允许用户注册
          </label>
        </div>
        <div class="form-group">
          <label>
            <input type="checkbox" v-model="settings.requireEmailVerification" />
            需要邮箱验证
          </label>
        </div>
        <div class="form-group">
          <label>默认用户角色</label>
          <select v-model="settings.defaultUserRole">
            <option value="user">普通用户</option>
            <option value="contributor">贡献者</option>
          </select>
        </div>
      </div>
      
      <div class="settings-section">
        <h3>内容设置</h3>
        <div class="form-group">
          <label>
            <input type="checkbox" v-model="settings.allowComments" />
            允许评论
          </label>
        </div>
        <div class="form-group">
          <label>
            <input type="checkbox" v-model="settings.moderateComments" />
            评论需审核
          </label>
        </div>
        <div class="form-group">
          <label>每页文章数</label>
          <input type="number" v-model="settings.articlesPerPage" min="1" max="100" />
        </div>
      </div>
      
      <div class="settings-section">
        <h3>SEO设置</h3>
        <div class="form-group">
          <label>默认Meta标题</label>
          <input type="text" v-model="settings.defaultMetaTitle" />
        </div>
        <div class="form-group">
          <label>默认Meta描述</label>
          <textarea v-model="settings.defaultMetaDescription" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label>默认Meta关键词</label>
          <input type="text" v-model="settings.defaultMetaKeywords" />
        </div>
      </div>
      
      <div class="settings-section">
        <h3>邮件设置</h3>
        <div class="form-group">
          <label>SMTP服务器</label>
          <input type="text" v-model="settings.smtpServer" />
        </div>
        <div class="form-group">
          <label>SMTP端口</label>
          <input type="number" v-model="settings.smtpPort" />
        </div>
        <div class="form-group">
          <label>SMTP用户名</label>
          <input type="text" v-model="settings.smtpUsername" />
        </div>
        <div class="form-group">
          <label>SMTP密码</label>
          <input type="password" v-model="settings.smtpPassword" />
        </div>
        <div class="form-group">
          <label>发件人邮箱</label>
          <input type="email" v-model="settings.senderEmail" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { settingsAPI } from '../../../api/index.js'

export default {
  name: 'SystemSettings',
  setup() {
    const settings = ref({
      siteName: '我的博客系统',
      siteDescription: '一个功能强大的博客系统',
      siteKeywords: '博客,Vue,JavaScript',
      siteLogo: '',
      allowRegistration: true,
      requireEmailVerification: true,
      defaultUserRole: 'user',
      allowComments: true,
      moderateComments: true,
      articlesPerPage: 10,
      defaultMetaTitle: '我的博客系统',
      defaultMetaDescription: '欢迎访问我的博客系统',
      defaultMetaKeywords: '博客,Vue,JavaScript',
      smtpServer: '',
      smtpPort: 587,
      smtpUsername: '',
      smtpPassword: '',
      senderEmail: ''
    })
    
    const logoInput = ref(null)
    
    const fetchSettings = async () => {
      try {
        const response = await settingsAPI.getSettings()
        if (response.data.settings) {
          settings.value = { ...settings.value, ...response.data.settings }
        }
      } catch (error) {
        console.error('Failed to fetch settings:', error)
      }
    }
    
    const saveSettings = async () => {
      try {
        await settingsAPI.updateSettings(settings.value)
        alert('设置保存成功')
      } catch (error) {
        console.error('Failed to save settings:', error)
        alert('保存设置失败')
      }
    }
    
    const triggerLogoUpload = () => {
      logoInput.value.click()
    }
    
    const handleLogoUpload = async (event) => {
      const file = event.target.files[0]
      if (!file) return
      
      try {
        const formData = new FormData()
        formData.append('file', file)
        
        const response = await settingsAPI.uploadLogo(formData)
        settings.value.siteLogo = response.data.url
      } catch (error) {
        console.error('Failed to upload logo:', error)
        alert('Logo上传失败')
      }
    }
    
    onMounted(() => {
      fetchSettings()
    })
    
    return {
      settings,
      logoInput,
      fetchSettings,
      saveSettings,
      triggerLogoUpload,
      handleLogoUpload
    }
  }
}
</script>

<style scoped>
.system-settings {
  padding: 20px;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.settings-header h2 {
  margin: 0;
  color: #2c3e50;
}

.settings-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.settings-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.settings-section h3 {
  margin-top: 0;
  color: #2c3e50;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #2c3e50;
  font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group input[type="checkbox"] {
  margin-right: 8px;
}

.form-group label input[type="checkbox"] {
  width: auto;
}

.logo-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.logo-preview {
  max-width: 200px;
  max-height: 100px;
}
</style>